<!--  -->
<template>
  <wd-popup
    v-model="popupVisible"
    custom-style="border-radius: 24rpx;width: 80%; padding-top: 66rpx;background:transparent"
    position="center"
  >
    <view class="tip-popup">
      <image class="tip-popup__image" src="@/assets/images/bell.png" mode="scaleToFill" />
      <image class="tip-popup__title" src="@/assets/images/tip.png" mode="scaleToFill" />
      <view class="tip-popup__content">
        <slot />
      </view>

      <c-button block custom-class="w-full" @click="popupVisible = false">确认</c-button>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const popupVisible = ref(false);

  const open = () => {
    popupVisible.value = true;
  };

  defineExpose({
    open,
  });
</script>

<style lang="scss" scoped>
  .tip-popup {
    background:
      linear-gradient(180deg, rgba(255, 128, 14, 0.22) 0%, rgba(255, 128, 14, 0) 100%), #ffffff;
    padding: 48rpx;
    display: block;
    position: relative;
    border-radius: 24rpx;

    &__title {
      width: 94rpx;
      height: 46rpx;
      margin: 0 auto;
      display: block;
    }
    &__image {
      position: absolute;
      top: -66rpx;
      right: 0;
      width: 262rpx;
      height: 250rpx;
    }
    &__content {
      margin: 50rpx 0 48rpx;
      font-size: 28rpx;
      color: $uni-color-title;
    }
  }
</style>
